<template>
  <div class="wp">
    <div class="title">{{current+1}}#{{item.title}}</div>
    <van-checkbox-group v-model="result">
      <van-checkbox
        class="checkBoxs"
        v-for="(val,idx) in options"
        :key="idx"
        :name="val.index"
      >{{val.index}}-{{val.value}}</van-checkbox>
    </van-checkbox-group>
    <div class="btn-wp">
      <van-button type="info" :disabled="current==0" @click="nowCurrent()">上一题</van-button>
      <span style="margin:0 5px">{{current+1}}/50</span>
      <van-button type="info" @click="submitFn" v-if="list.length-1==current">提交</van-button>
      <van-button type="info" @click="nowCurrent(1)" v-else>下一题</van-button>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapActions } from "vuex";
import { mendZero } from "../../utils/commonality";
import { Dialog } from "vant";
export default {
  name: "exam",
  data() {
    return {
      result: [],
      score: 0,
      timeout: 0,
      seconds: 0,
      form: {},
      useTime: 0
    };
  },
  mounted() {
    this.timeout = new Date().getTime();
  },
  computed: {
    item() {
      return (
        this.$store.state.exam.list.length &&
        this.$store.state.exam.list[this.$store.state.exam.current]
      );
    },
    options() {
      return this.item.options && JSON.parse(this.item.options);
    },
    current() {
      return this.$store.state.exam.current;
    },
    list() {
      return this.$store.state.exam.list;
    },
    type() {
      return this.$store.state.exam.type;
    },
    times() {
      return this.$store.state.exam.times;
    },
    id() {
      return this.$store.state.user.id;
    }
  },
  watch: {
    times(newVal) {
      if (newVal == 0) {
        this.scoreTotal();
        if (this.type == "exam") {
          this.getScore(this.form);
          Dialog.alert({
            title: "考试时间到",
            message: `分数:${this.score}分\n用时:${this.useTime}`
          }).then(() => {
            this.$router.push("/home");
            this.setCurrent(0)
          });
        } else {
          Dialog.confirm({
            title: "时间到,是否继续学习",
            message: `分数:${this.score}分\n用时:${this.useTime}`
          })
            .then(() => {
              this.$router.push("/home");
              this.setCurrent(0)
            })
            .catch(() => {});
        }
      }
    }
  },
  methods: {
    ...mapMutations("exam", ["setCurrent"]),
    ...mapActions("exam", ["getScore"]),
    nowCurrent(num) {
      this.result.sort();
      this.item["nowAnswers"] = JSON.stringify(this.result);
      if (num) {
        this.setCurrent(this.current + 1);
        this.result = this.item.nowAnswers
          ? JSON.parse(this.item.nowAnswers)
          : [];
      } else {
        this.setCurrent(this.current - 1);
        this.result = JSON.parse(this.item.nowAnswers);
      }
    },
    submitFn() {
      this.scoreTotal();
      if (this.type == "exam") {
        Dialog.alert({
          message: `分数:${this.score}分\n用时:${this.useTime}`
        }).then(() => {
          this.getScore(this.form);
          this.$router.push("/home");
          this.setCurrent(0);
        });
      } else {
        Dialog.alert({
          title: "恭喜你学习完成",
          message: `分数:${this.score}分\n用时:${this.useTime}`
        }).then(() => {
          this.$router.push("/home");
          this.setCurrent(0);
        });
      }
    },
    scoreTotal() {
      this.scoreTestFn();
      this.useTimeFn();
      this.form = {
        uid: this.id,
        score: this.score,
        total_time: this.seconds,
        paper: JSON.stringify(this.list)
      };
    },
    // 学习成绩
    scoreTestFn() {
      this.score = this.list.reduce((a, b) => {
        b.nowAnswers === b.answers && (a += 2);
        return a;
      }, 0);
    },
    useTimeFn() {
      let currentTimeOut = new Date().getTime();
      this.seconds = Math.floor((currentTimeOut - this.timeout) / 1000);
      let m = Math.floor(this.seconds / 60);
      let s = Math.floor(this.seconds % 60);
      this.useTime = mendZero(m) + "分" + mendZero(s) + "秒";
    }
  }
};
</script>

<style scoped>
.title {
  font-size: 18px;
  margin-right: 52px;
}
.exam {
  margin: 10px;
}
.checkBoxs {
  margin-top: 10px;
}
.wp {
  margin: 10px;
}
.btn-wp {
  /* text-align: center; */
  margin-top: 10px;
}
</style>